<!--页面保存操作日志-->

<template>
  <Drawer title="页面更新操作日志"
          placement="right"
          v-model="visible"
          width="450"
          :mask-closable="true"
          :styles="$PnUtil.buildDrawerStyleByHasFooter()">

    <Table ref="table" :columns="columns" :data="tableData" :loading="loading"></Table>
    <Page size="small" class="m-t-5px float-right" :total="pageTotal" :current.sync="pageIndex" :page-size="pageSize"
          show-elevator show-total @on-change="loadLogOperates">
    </Page>

  </Drawer>
</template>

<script>
import ManageMixin from '../../../../mixin/ManageMixin'

import { createHelpers } from 'vuex-map-fields';

const { mapFields } = createHelpers({
  getterType: 'designer/getField',
  mutationType: 'designer/updateField',
});

export default {
  name: "PageLogOperateDrawer",
  mixins: [ManageMixin],
  data() {
    return {
      visible: false,
      loading: false,
      columns: [
        {
          title: '操作名称',
          key: 'operate_name'
        },
        {
          title: '执行时间',
          key: 'create_date',
          width: 170
        },
        {
          title: '操作',
          key: 'action',
          width: 130,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Tooltip', {
                props: {
                  placement: 'left',
                  content: '回退至此记录的状态'
                },
                style: {}
              }, [
                h('Button', {
                  props: {
                    size: 'small',
                    icon: 'md-undo'
                  },
                  on: {
                    click: () => {
                      this.rollbackPageToLogOperate(params.row)
                    }
                  }
                },)
              ]),
              h('Tooltip', {
                props: {
                  placement: 'left',
                  content: '预览'
                },
                style: {},
                'class': {
                  'm-l-5px': true
                },
              }, [
                h('Button', {
                  props: {
                    size: 'small',
                    'custom-icon': 'iconfont icon-open-to-new-window'
                  },
                  on: {
                    click: () => {
                      this.previewPage(params.row)
                    }
                  }
                },)
              ]),
              h('Tooltip', {
                props: {
                  placement: 'left',
                  content: '删除日志'
                },
                style: {},
                'class': {
                  'm-l-5px': true
                },
              }, [
                h('Button', {
                  props: {
                    size: 'small',
                    icon: 'md-trash'
                  },
                  on: {
                    click: () => {
                      this.deleteLogOperate(params.row)
                    }
                  }
                },)
              ]),
            ]);
          }
        }
      ]
    }
  },
  mounted() {

  },
  methods: {

    init() {
      this.visible = true
      this.loadLogOperates()
    },

    loadLogOperates() {
      this.loading = true
      this.$PnApi.LogOperateApi.getPnLogOperateByPage(
          {pageIndex: this.pageIndex, pageSize: this.pageSize, request_uri: '/page/updatePage', page_id: this.$PnUtil.getUrlParam('page_id')}).then(result => {
        this.tableData = result.data.payload.list;
        this.pageTotal = result.data.payload.total;
        this.loading = false
      })
    },

    rollbackPageToLogOperate(logOperate) {
      this.$Modal.confirm({
        title: '提醒',
        content: '<p>确认要将当前页面的布局信息回退至此操作日志记录的状态吗？</p>' +
            '<div class="m-b-10px"></div>' +
            '<p><strong>注意事项：</strong></p>' +
            '<ul>' +
            '<li style="text-align: justify;">1、回退操作成功后不会立即保存页面，请手动保存页面</li>' +
            '<li style="text-align: justify;">2、当前页面的布局类型与日志记录时页面的布局类型必须保持一致，如果不相同，强行回退，则会造成页面布局预览状态下无法正常解析（如果出现解析不成功，不保存页面即可）</li>' +
            '<li style="text-align: justify;">3、如果确认回退操作没有问题后，强烈建议再对页面进行一次保存，然后刷新整个设计器，保证设计器状态的初始化，减少一些不可预知的异常情况</li>' +
            '</ul>',
        onOk: () => {
          this.$PnApi.LogOperateApi.uncompressLogOperateLayoutStr(logOperate.id).then(result => {
            if (result.data.success) {
              let layout = JSON.parse(result.data.payload)
              this.$store.commit('designer/setLayout', layout)
            }
          })
        }
      });
    },

    previewPage (logOperate) {
      this.$PnApi.LogOperateApi.uncompressLogOperateLayoutStr(logOperate.id).then(result => {
        if (result.data.success) {
          let pageMetadata = this.$PnUtil.deepClone(this.pageMetadata)
          pageMetadata.layout = JSON.parse(result.data.payload)
          localStorage.setItem('previewPageMetadata', JSON.stringify(pageMetadata));
          this.$PnUtil.openPageToBlank(this.pageMetadata.path, {preview: 'true', fromLogOperate: true, logOperateCreateDate: logOperate.create_date});
        }
      })
    },

    deleteLogOperate(logOperate) {
      this.$Modal.confirm({
        title: '提醒',
        content: '确认删除此条日志记录吗？',
        onOk: () => {
          this.$PnApi.LogOperateApi.deleteLogOperateById(logOperate.id).then(result => {
            if (result.data.success) {
              this.$Message.success(result.data.message)
              this.loadLogOperates()
            }
          })
        }
      });
    },

    cancel() {
      this.visible = false;
      this.$emit('cancel', this.visible)
      // 可以在这里编写关闭之后的逻辑处理
    }
  },
  computed: {
    ...mapFields({
      pageMetadata: 'pageMetadata'
    })
  },
  watch: {

  }
}
</script>

<style lang="less" scoped>

</style>
